<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>我的博客</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="blog.html">博客</a></li>
                    <li><a href="about.html" class="active">关于我</a></li>
                    <li><a href="contact.html">联系方式</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="about-header">
        <div class="container">
            <h2>关于我</h2>
        </div>
    </section>

    <section class="about-content">
        <div class="container">
            <div class="about-grid">
                <div class="about-image">
                    <img src="img/profile.jpg" alt="我的照片">
                </div>
                <div class="about-text">
                    <h3>你好，我是小明</h3>
                    <p>欢迎来到我的个人博客！我是一名热爱技术和生活的开发者，目前专注于Web前端开发领域。</p>
                    <p>我拥有5年的开发经验，熟悉HTML、CSS、JavaScript以及各种前端框架和库，如React、Vue等。在工作之余，我喜欢探索新技术，并将学到的知识分享在这个博客上。</p>
                    <p>除了编程，我还热爱摄影、阅读和旅行。通过这些爱好，我获取灵感，拓宽视野，丰富自己的生活体验。</p>
                    <p>创建这个博客的目的是记录自己的成长历程，分享技术心得，以及与志同道合的朋友交流。希望我的文章能够对你有所帮助或启发。</p>
                </div>
            </div>

            <div class="skills">
                <h3>我的技能</h3>
                <div class="skills-grid">
                    <div class="skill-item">
                        <h4>HTML5</h4>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 95%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <h4>CSS3</h4>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <h4>JavaScript</h4>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <h4>React</h4>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 80%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <h4>Vue</h4>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 75%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <h4>Node.js</h4>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 70%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="experience">
                <h3>工作经历</h3>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-date">2020 - 现在</div>
                        <div class="timeline-content">
                            <h4>高级前端开发工程师</h4>
                            <p class="timeline-company">某科技有限公司</p>
                            <p>负责公司核心产品的前端架构设计和开发，优化用户体验，提高应用性能。</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2018 - 2020</div>
                        <div class="timeline-content">
                            <h4>前端开发工程师</h4>
                            <p class="timeline-company">某网络科技有限公司</p>
                            <p>参与多个项目的前端开发，构建响应式网站和Web应用。</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2016 - 2018</div>
                        <div class="timeline-content">
                            <h4>实习前端开发</h4>
                            <p class="timeline-company">某互联网公司</p>
                            <p>参与网站界面的开发和维护，学习前端技术栈和工作流程。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 我的个人博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#"><img src="img/github.svg" alt="GitHub"></a>
                <a href="#"><img src="img/twitter.svg" alt="Twitter"></a>
                <a href="#"><img src="img/linkedin.svg" alt="LinkedIn"></a>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html> 